{% extends 'base.html' %}

{% block title %} | Services {% endblock %}
{% block content %}

<!-- Sub banner start -->
<div class="sub-banner overview-bgi">
    <div class="container breadcrumb-area">
        <div class="breadcrumb-areas">
            <h1>Services</h1>
            <ul class="breadcrumbs">
                <li><a href="{% url 'home' %}">Home</a></li>
                <li class="active">Services</li>
            </ul>
        </div>
    </div>
</div>
<!-- Sub Banner end -->

<!-- Services start -->
<div class="services content-area">
    <div class="container">
        <!-- Main title -->
        <div class="main-title text-center">
            <h1>Our <span>Services</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">1</div>
                    <div class="icon">
                        <i class="flaticon-support-2"></i>
                    </div>
                    <div class="detail">
                        <h3>Free Support</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">2</div>
                    <div class="icon">
                        <i class="flaticon-speed"></i>
                    </div>
                    <div class="detail">
                        <h3>Super Fast</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">3</div>
                    <div class="icon">
                        <i class="flaticon-motor"></i>
                    </div>
                    <div class="detail">
                        <h3>Repairing</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">4</div>
                    <div class="icon">
                        <i class="flaticon-air-conditioner"></i>
                    </div>
                    <div class="detail">
                        <h3>AIR conditioning</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">5</div>
                    <div class="icon">
                        <i class="flaticon-fuel"></i>
                    </div>
                    <div class="detail">
                        <h3>Oil Change</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">7</div>
                    <div class="icon">
                        <i class="flaticon-wheel"></i>
                    </div>
                    <div class="detail">
                        <h3>Engine Repair</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">6</div>
                    <div class="icon">
                        <i class="flaticon-car-2"></i>
                    </div>
                    <div class="detail">
                        <h3>Dealership</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">8</div>
                    <div class="icon">
                        <i class="flaticon-lock"></i>
                    </div>
                    <div class="detail">
                        <h3>Security</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="service-info">
                    <div class="number">9</div>
                    <div class="icon">
                        <i class="flaticon-deal"></i>
                    </div>
                    <div class="detail">
                        <h3>Trusted Agents</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Services end -->


{% endblock %}